<template>
		<view class="neirong">
			<!-- 上部分 -->
			<view class="canuse-top">
				<view class="zia">
					<text>3</text>
				    <text>元</text>
				</view>
				<view class="zib">
					<text>3元代金券</text>
					<text>有效期至2022-10-27</text>
				</view>
				<view class="zic">
					<button>去使用</button>
				</view>
				
			</view>
			<!-- 下部分 -->
			<view class="canuse-btm">
				<text>Chabaidao</text>
				<text>使用规则 ></text>
			</view>
			
		</view>

</template>

<script>
	export default {
		name:"canuse",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	button {
		margin: 0 10rpx 20rpx 0;
		padding: 0rpx;
		height: 55rpx;
		width: 140rpx;
		border-radius: 40rpx;
		background-color: #0550c8;
		font-size: 22rpx;
		color: #ffffff;
	}
	template{
		background-color: #f8f8f8;
	}
	.neirong{
		width: 650rpx;
		height: 220rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		margin: auto;
	}

    .canuse-top{
	    display: flex;
		align-items: center;
		margin-top: 20rpx;
		border-bottom: 1rpx dashed #afafaf ;
    }
	.zia{
		width: 216rpx;
		height: 110rpx;
	}
	.zib{
		width: 218rpx;
		height: 110rpx;
	}
	.zic{
		width: 216rpx;
		height: 110rpx;
	}
	
	.zia>text:nth-child(1){
		margin-left: 50rpx;
		font-size: 75rpx;
		color: #0550c8;
		font-weight: 400;
	}
	.zia>text:nth-child(2){
		color: #0550c8;	
		margin-left: 20rpx;
	}
	.zib{
		margin-top: 10rpx;
	}
	.zib>text:nth-child(1){
		font-size: 35rpx;
		width: 100%;
		margin-right: 20rpx;
	}
	.zib>text:nth-child(2){
		font-size: 20rpx;
		color: #666666;
	}
	.zic{
		margin-top: 30rpx;
		margin-left: 80rpx;
	}
	.canuse-btm{
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}
	.canuse-btm>text{
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.canuse-btm>text:nth-child(1){
		color: #0550c8;
		font-size: 30rpx;
		font-weight: 600;
	}
	.canuse-btm>text:nth-child(2){
		color: #666666;
	}

</style>